<template>
  <div id="commodityList">
    <div class="filter-container">
      <!--<span class="filter-item">搜索：</span>-->

      <el-button v-waves class="filter-item" type="primary" style="width: 100px;margin-bottom: 10px" @click="add">
        添加商品
      </el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row
              style="width: 100%;">
      <el-table-column align="center" label="商品名称" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品封面" fixed="left">
        <template slot-scope="scope">
          <div class="coverWrap">
            <img :src="scope.row.coverImage" class="coverImage" v-if="scope.row.coverImage"/>
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="售价/原价/结算价" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.price|parseMoneyExcept}}/{{scope.row.originalPrice|parseMoneyExcept}}/{{scope.row.settlePrice|parseMoneyExcept}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="成团人数">
        <template slot-scope="scope">
          <span>{{scope.row.groupBuySuccess}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="中签人数">
        <template slot-scope="scope">
          <span>{{scope.row.groupBuySuccessUser}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="拼团失败奖励金额">
        <template slot-scope="scope">
          <span>{{scope.row.groupBuyFailedAward|parseMoneyExcept}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="拼团成团公益金额">
        <template slot-scope="scope">
          <span>{{scope.row.groupBuyContribution|parseMoneyExcept}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="拼团成团分红金额">
        <template slot-scope="scope">
          <span>{{scope.row.groupBuyBonus|parseMoneyExcept}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="开售时间">
        <template slot-scope="scope">
          <span>{{scope.row.startSaleTime|parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序">
        <template slot-scope="scope">
          <span>{{scope.row.queue}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否上架" v-if="hasPerm('product:product:enable')">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enable" @change="modifyEnable(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right"
                       v-if="hasPerm('product:product:edit') || hasPerm('product:product:del')">
        <template slot-scope="scope">
          <el-button type="text" size="mini" v-if="hasPerm('product:product:edit')" @click="edit(scope.row.id)">编辑
          </el-button>
          <el-button type="text" size="mini" v-if="hasPerm('product:product:del')" @click="del(scope.row.id)"
                     style="color:red">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="paginationContainer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import {productDel, productEnable, productList} from '../../api/product'
  // import {redPacketList} from '../../api/article'
  import waves from '@/directive/waves' // 水波纹指令
  import {TypePaging} from '../../api/user';
  import {long2ip, showDecimal} from '../../utils'

  export default {
    name: "commodityList",
    directives: {
      waves
    },
    data() {
      return {
        friendDialogTableVisible: false,
        flowsDialogTableVisible: false,
        friendData: [],
        flowsData: [],
        tableKey: 0,
        inviteUserName: '',
        listQuery: {
          enable: "",
          limit: 10,
          page: 0,
        },
        list: [],

        total: 0,

        listLoading: false,

        loading: false,
        users: {},

      }
    },
    methods: {
      add() {
        this.$router.push({name: 'commodityDetail', params: {id: 0}})
      },
      edit(id) {
        this.$router.push({name: 'commodityDetail', params: {id: id}})
      },
      modifyEnable(item) {
        productEnable({
          targetId: item.id,
          yes: item.enable ? true : false,
        })
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("操作成功");
              this.getList();
            }
          });
      },
      //删除用户
      del(id) {
        this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            productDel({
              targetIds: [id],
            }).then(res => {
              if (res.code === 200) {
                this.$message.success("删除成功！");
                this.getList();
              } else {
                this.$message.error(res.message);
              }
            });
          })
          .catch(() => {

          });
      },
      productMonthCount(id) {
        this.$router.push({name: 'productMonthCount', params: {id: id}})
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.start = val - 1;
        this.getList()
      },
      goDetails(id) {
        this.$router.push({
          name: 'userDetail', params: {
            id: id
          }
        })
      },
      formatMoney(money) {
        return showDecimal(money)
      },
      handleFilter() {
        this.listQuery.start = 1;
        this.getList()
      },
      //服务分类
      getList() {
        this.listLoading = true
        productList(this.listQuery).then(res => {
          if (res.code === 200) {
            this.list = res.data
            console.log(res.data);
            this.listLoading = false;
            this.total = res.total
            this.users = res.users
          } else this.$message({message: res.message})
        })
      },
    },
    mounted() {
      this.getList()
    }

  }
</script>

<style rel="stylesheet/scss" lang="scss">
  #commodityList {
    margin: 30px 35px;
    .paginationContainer {
      margin-top: 20px;
      text-align: right;
    }
    .coverWrap {
      display: flex;
      align-items: center;
      justify-content: center;
      .coverImage {
        width: 60px;
        height: 60px;
      }
    }
  }
</style>
